<template>
    <div class="Trends_Root">
        <TrendInfo v-for="t in trendData" :key="t.id" :id="t.id" :title="t.title" :content="t.content" :img="t.avatar"
            :author="t.authorName" :date="t.createTime" @DeleteTrend="TrendAcceptUE">
        </TrendInfo>
        <el-empty :image-size="200" description="没有动态可以审核哦" v-if="emptyShow" />
    </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import TrendInfo from '../../components/TrendInfo.vue';
import { GetTrendInfos, AuditTrend } from '../../Net/netApi.js'
import { CustomerConfirm, CustomerMessage } from '../../Util/Confirm.js';

let trendData = ref([])
let emptyShow = ref(true)
onMounted(() => {
    GetAllTrendList()
})


//TODO:如果出现数据异常，请删除这里
watch(trendData, (newValue, oldValue) => {
    if (newValue != oldValue) {
        trendData.value = newValue
    }
})

//发起请求获取动态列表
const GetAllTrendList = async () => {
    let res = await GetTrendInfos()
    trendData.value = []
    if (res.code == '200') {
        trendData.value = res.data
    } else {
        emptyShow.value = true
    }
    if (trendData.value.length > 0) {
        emptyShow.value = false
    }
}

const TrendAcceptUE = (id) => {
    CustomerConfirm('确定要删除该动态吗', '警告', '确定', '取消', 'warning', () => TrendDelete(id), () => CustomerMessage('已取消该操作', 'warning'))
}

const TrendDelete = async (id) => {
    console.log(`已删除该动态${id}`)
    let res = await AuditTrend(id)
    if (res.code == '200') {
        CustomerMessage('动态删除成功', 'success', true)
        GetAllTrendList()
    }
}

</script>

<style lang='less' scoped>
.Trends_Root {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap:0.5rem;
    padding: 0.5rem 0 0.5rem 0;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    scrollbar-width: none;
}
</style>